<template>
	<view class="serch">
		<!-- 顶部商品搜索 -->
		<view class="goods_serch">
			<view class="serch_int">
				<component-search @onsearch="search_button_event" :propIsOnEvent="true" :propIsRequired="false"
					propPlaceholder="输入商品名称搜索"></component-search>
			</view>
		</view>
		<!-- 商品内容 -->
		<view class="goods_content">
			<!-- 左边商品分类 -->
			<view class="goods_sort">
				<view class="sort_name" v-for="(item,index) in data_content.items" :key="index"
					:class="'text-size-sm item tc cr-base cp oh ' + (nav_active_item_two_index == index ? 'nav-active cr-main border-color-main' : '')"
					:data-index="nav_active_index" :data-itemtwoindex="index" :data-itemthreeindex="-1"
					@tap="nav_event">{{item.cateName}}</view>
			</view>
			<view class="right_item">
				<view
					v-if="(data_three_content || null) != null && (data_three_content.items || null) != null && data_three_content.items.length > 0"
					class="word-list scroll-view-horizontal">
					<scroll-view :scroll-x="true" :scroll-with-animation="true"
						:scroll-into-view="'three-nav-item-'+nav_active_item_three_index">
						<view
							:class="'word-icon dis-inline-block text-size-sm round padding-top-xs padding-bottom-xs padding-left padding-right '+((nav_active_item_three_index == -1) ? 'bg-main-light br-main-light cr-main' : 'br-gray cr-gray')"
							:data-index="nav_active_index" :data-itemtwoindex="nav_active_item_two_index"
							:data-itemthreeindex="-1" @tap="nav_event">全部</view>
						<block v-for="(item, index) in data_three_content.items" :key="index">
							<view
								:class="'word-icon dis-inline-block text-size-sm round padding-top-xs padding-bottom-xs padding-left padding-right '+((nav_active_item_three_index == index) ? 'bg-main-light br-main-light cr-main' : 'br-gray cr-gray')"
								:id="'three-nav-item-'+index" :data-index="nav_active_index"
								:data-itemtwoindex="nav_active_item_two_index" :data-itemthreeindex="index"
								@tap="nav_event">{{item.cateName}}</view>
						</block>
					</scroll-view>
				</view>
				<!-- 右边商品列表 -->
				<view class="goods_img" v-if="data_list.length<=0">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2025/03/10/219d73a04f2b4825a638e33b109e10e2.png" mode="widthFix"></image>
					<view class="img_name">暂时还没有数据</view>
				</view>
				<view class="goods_list">
					<scroll-view :scroll-y="true" :scroll-top="scroll_top" 
						@scrolltolower="scroll_lower" lower-threshold="60" style="height: 100vh;">
						<view class="list_item" v-for="item in data_list" :key="item.goods_id"
							@click="onDetail(item.goods_id)">
							<view class="list_item_img">
								<image :src="item.images" mode="widthFix"></image>
							</view>
							<view class="list_item_info">
								<view class="info_name">{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import componentSearch from "../../component/search/search.vue"
	export default {
		data() {
			return {
				state: null,
				data_bottom_line_status: false,
				data_list_loding_status: 1,
				data_list_loding_msg: '',
				user: null,
				tabbar_params: null,
				common_site_type: 0,
				category_list: [],
				data_content: null,
				data_three_content: null,
				cart: null,
				data_list: [],
				data_total: 0,
				data_page_total: 0,
				data_page: 1,
				is_first: 1,
				search_keywords_value: '',
				nav_active_index: 0,
				nav_active_item_two_index: -1,
				nav_active_item_three_index: -1,
				scroll_top: 0,
				scroll_top_old: 0,
				cart_status: false,
				goods_choose_data: {},
				// 基础配置
				category_show_level: 0,
				// 自定义分享信息
				share_info: {},
				// 临时操作数据
				temp_opt_data: null,
			}
		},
		components: {
			componentSearch
		},
		// 分享给朋友
		onShareAppMessage(res) {
			return {
				title: app.globalData.data.tenantName,
				path: "pages/goods_sort/goods_sort",
				mpId: app.globalData.data.appid
			}
		},
		onPullDownRefresh() {
			this.init();
		},

		methods: {
			// 获取数据
			init() {
				if (this.is_first == 1) {
					this.data_list_loding_status = 1
				}
				var data = {
					"type": 'brand_series'
				};
				let url = app.globalData.get_request_url("category");
				uni.request({
					url: url,
					method: 'POST',
					data: {
						data
					},
					dataType: 'json',
					success: res => {
						uni.stopPullDownRefresh();
						if (res.data.code == 200) {
							var index = this.nav_active_index;
							var temp_category = res.data.data.category || [];
							// 是否指定分类
							var tabbar_params = this.tabbar_params;
							if (temp_category.length > 0 && (tabbar_params || null) != null && (tabbar_params
									.id || null) != null) {
								for (var i in temp_category) {
									if (temp_category[i]['id'] == tabbar_params.id) {
										index = i;
										break;
									}
								}
							}
							this.category_list = temp_category;
							this.data_content = temp_category[index] || null;
							this.nav_active_index = index;
							// 指定分类则重新读取列表数据
							if (tabbar_params != null && this.nav_active_index != index) {
								this.is_first = 1
								this.data_page = 1
								this.data_list = []
								this.data_list_loding_status = 1
								this.nav_active_item_two_index = -1
								this.nav_active_item_three_index = -1
							}
							// 非商品列表模式
							if (this.category_show_level != 0) {
								this.data_list_loding_status = temp_category.length == 0 ? 0 : 3
								this.data_bottom_line_status = true
							}
						
							// 商品列表模式
							if (this.category_show_level == 0) {
								if (this.is_first == 1) {
									this.get_goods_list(1);
								}
							} else {
								
								if (this.is_first == 1 && this.category_show_level == 0) {
									
								}
							}
							// 是否首次记录
							this.is_first = 0
							
						} else {
							this.data_list_loding_status = 2
							this.data_list_loding_msg = res.data.msg
						}
					},
					fail: () => {
						uni.stopPullDownRefresh();
						this.data_list_loding_status = 2
						this.data_list_loding_msg = '服务器请求出错'
						uni.showToast({
							title: '服务器请求出错'
						})
					}
				});
			},
			// 获取商品列表
			get_goods_list(is_mandatory) {
				// 分页是否还有数据
				if ((is_mandatory || 0) == 0) {
					if (this.data_bottom_line_status == true) {
						uni.stopPullDownRefresh();
						return false;
					}
				}

				// 请求参数
				var data = {
					page: this.data_page,
					wd: this.search_keywords_value || ''
				};
				// 分类id
				if ((this.data_content || null) != null) {
					// 主分类id
					data['category_id'] = 0;
					data['type'] = this.data_content['type'];
					// 是否选中了二级分类
					if (this.nav_active_item_two_index != -1) {
						data['category_id'] = this.data_content['items'][this.nav_active_item_two_index]['categoryId'];
						data['cate_id'] = this.data_content['items'][this.nav_active_item_two_index]['catId'];
					}
					// 是否选中了三级分类
					if (this.data_three_content != null && this.nav_active_item_three_index != -1) {
						data['category_id'] = this.data_three_content['items'][this.nav_active_item_three_index][
							'categoryId'
						];
					}
				}

				// 获取数据
				uni.request({
					url: app.globalData.data.request_url + 'datalist?tenantId=' + app.globalData.data.tenantId +
						'&token=' + this.token,
					method: 'POST',
					data: data,
					dataType: 'json',
					success: res => {
						if (res.data.code == 200) {
							var data = res.data.data;
							if (data.data.length > 0) {
								if (this.data_page <= 1) {
									var temp_data_list = data.data;
								} else {
									var temp_data_list = this.data_list || [];
									var temp_data = data.data;
									for (var i in temp_data) {
										temp_data_list.push(temp_data[i]);
									}
								}
								this.data_list = temp_data_list
								this.data_total = data.total
								this.data_page_total = data.page_total
								this.data_list_loding_status = 3
								this.data_page = this.data_page + 1

								// 是否还有数据
								if (this.data_page > 1 && this.data_page > this.data_page_total) {
									this.data_bottom_line_status = true
								}
							} else {
								this.data_list_loding_status = 0
								this.data_total = 0
								if (this.data_page <= 1) {
									this.data_list = []
									this.data_bottom_line_status = false
								}
							}
						} else {
							this.data_list_loding_status = 0
							this.data_list_loding_msg = res.data.msg
							uni.showToast({
								title: res.data.msg
							})
						}
					},
					fail: () => {
						this.data_list_loding_status = 2
						this.data_list_loding_msg = "服务器请求出错"
						uni.showToast({
							title: '服务器请求出错'
						})
					}
				});
			},
			// 重置滑动位置
			reset_scroll() {
				this.scroll_top = this.scroll_top_old
				this.$nextTick(() => {
					this.scroll_top = 0
				});
			},
			// 滑动事件位置记录
			scroll_event(e) {
				this.scroll_top_old = e.detail.scrollTop;
			},

			// 滚动加载
			scroll_lower(e) {
				this.get_goods_list();
			},
			nav_event(e) {
				var index = e.currentTarget.dataset.index;
				var two_index = e.currentTarget.dataset.itemtwoindex;
				var three_index = e.currentTarget.dataset.itemthreeindex;
				var temp_data_content = this.category_list[index] || null;
				var temp_data_three_content = null;
				if (two_index != -1 && temp_data_content != null) {
					temp_data_three_content = temp_data_content['items'][two_index];
				}
				this.nav_active_index = index
				this.nav_active_item_two_index = two_index
				this.nav_active_item_three_index = three_index
				this.data_content = temp_data_content
				this.data_three_content = temp_data_three_content
				this.data_page = 1
				this.data_list_loding_status = 1
				this.data_list = []

				if (this.category_show_level == 0) {
					this.reset_scroll();
					this.get_goods_list(1);
				}
			},
			// 跳转详情
			onDetail(id) {
				uni.navigateTo({
					url: "/pages/goods_detail/goods_detail?id=" + id
				})
			},
			// 搜索事件
			search_button_event(e) {
				// 商品列表模式
				if (this.category_show_level == 0) {
					this.search_keywords_value = e || ''
					this.data_page = 1
					this.data_list_loding_status = 1
					this.data_list = []
					this.get_goods_list(1);
				} else {
					// 进入搜索页面
					// console.log("进入搜索页面");
					// uni.navigateTo({
					//     url: '/pages/goods-search/goods-search'+(((e || null) == null) ? '' : '?keywords='+e)
					// });
				}
			}
		},
		onLoad() {
			this.token = uni.getStorageSync("token")
		},
		onShow() {
			// 数据加载
			this.init()
		}
	}
</script>

<style lang="less">
	.word-icon {
		margin-right: 20rpx;
	}

	.dis-inline-block {
		display: inline-block !important;
	}

	.text-size-sm {
		font-size: 26rpx !important;
	}

	.item {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 10rpx;
		border-left: 3px solid #fff;
		border-right: 3px solid #fff;
	}

	.tc {
		text-align: center;
	}

	.cr-base {
		color: #666 !important;
	}

	.cp {
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.oh {
		overflow: hidden;
	}

	.nav-active {
		background: #f5f5f5;
		border-width: 0 0 0 3px;
		border-right: 3px solid #f5f5f5 !important;
		font-weight: bold;
	}

	.cr-main {
		color: red !important;
	}

	.border-color-main {
		border-color: red !important;
	}


	// .active {
	// 	border-bottom: 1px solid red;
	// 	color: red;
	// }

	.serch {

		// 顶部商品搜索
		.goods_serch {
			margin-top: 5px;
			display: flex;
			align-items: center;
			margin-left: 30px;
			height: 40px;

			.logo {
				image {
					width: 72px;
					height: 40px !important;
				}
			}

			.serch_int {
				position: relative;
				background-color: #f0f0f0;
				width: 60%;
				height: 30px;

				// margin-left: 22px;
				input {
					padding-left: 35px;
					text-align: left;
					line-height: 30px;
					height: 30px;
				}

				image {
					position: absolute;
					left: 2px;
					top: 2px;
					width: 25px;
				}
			}
		}

		// 商品内容
		.goods_content {
			display: flex;
			width: 100%;
			margin-top: 10px;

			// 左边商品分类
			.goods_sort {
				width: 25%;

				.sort_name {
					width: 100%;
					background-color: white;
					height: 30px;
					text-align: center;
					line-height: 30px;
					border-bottom: 1px solid #f0f0f0;
					font-size: 12px;

				}
			}

			.right_item {
				width: 75%;

				.word-list {
					position: sticky;
					top: 0;
					right: 0;
					background: #f5f5f5;
					z-index: 1;
					padding: 0px 1px 20rpx 1px;
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					background-color: #f0f0f0;
					border-left: 2px solid #f0f0f0;
				}

				.scroll-view-horizontal {
					white-space: nowrap;
					box-sizing: border-box;
					width: calc(100% - 20rpx);
				}

				// 右边商品列表
				.goods_list {
					width: 100%;
					background-color: #f0f0f0;
					border-top: 1px solid #f0f0f0;

					.list_item {
						width: 95%;
						background-color: red;
						margin-bottom: 8px;
						margin-left: 8px;
						border-radius: 8px;
						background-color: white;
						display: flex;

						.list_item_img {
							display: flex;
							align-items: center;
							margin-left: 5px;

							image {
								width: 120px;
								height: 120px;
							}
						}

						.list_item_info {
							margin-left: 10px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							line-height: 10px;
							padding-top: 10px;
							padding-bottom: 10px;
							font-size: 13px;
							.info_name{
								width: 310rpx;
								height: 60rpx !important;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								padding-top: 20rpx;
							}

							.info_price {
								color: red;
							}
						}
					}
				}
			}
		}
	}
	.goods_img{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f0f0f0 !important;
		padding-top: 20%;
		image{
			width: 140px;
		}
		.img_name{
			font-size: 15px;
			color: #666;
		}
	}
</style>